<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
	
	
	xmlns:composite="http://xmlns.jcp.org/jsf/composite">

<composite:interface name="inlineEditor">
	<composite:attribute name="fieldProperty" required="true" />
	<composite:attribute name="fieldName" required="true"
		shortDescription="Type initial letter uppercase." />
	<composite:attribute name="placeHolder" required="false"
		default="Please fill in this text attribute." />
	<composite:attribute name="minLength" default="0" />
	<composite:attribute name="styleClass" default="" />
</composite:interface>

<composite:implementation
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">

	<c:set var="attr" value="#{cc.attrs.fieldName}" />
	<c:set var="attrLc" value="#{fn:toLowerCase(cc.attrs.fieldName)}" />
	<c:set var="attrUpdateMethod" value="update#{attr}" />
	<ui:param name="styleClass"
		value="#{empty cc.attrs.styleClass ? attrLc : cc.attrs.styleClass}" />
	<c:set var="enrichedPlaceHolder"
		value="#{pubController.enrichPlaceholder(cc.attrs.placeHolder)}" />


	<div id="div#{attr}" class="#{styleClass}" contenteditable="true">
		#{cc.attrs.fieldProperty}
		<c:if test="#{empty cc.attrs.fieldProperty}">#{enrichedPlaceHolder}</c:if>
	</div>

	
	<a4j:jsFunction name="#{attrUpdateMethod}">
		<a4j:param name="#{attr}" assignTo="#{cc.attrs.fieldProperty}" />
	</a4j:jsFunction>

	<c:set var="prevValue" value="previousValue#{attr}" />
	
	<script>		
	/*
			var isReady = true;
			#{prevValue} = "";	
			jQuery(document).ready(function(){
				jQuery('#div#{attr}').bind('DOMSubtreeModified', function(event) {		
					if(CKEDITOR.status == "loaded" &amp;&amp; isReady){
						var text = CKEDITOR.instances.div#{attr}.getData().trim();												  
				    	if(text == ""){							    	
					    	text = "#{enrichedPlaceHolder}";
					    	CKEDITOR.instances.div#{attr}.setData("#{enrichedPlaceHolder}");		    	
				    	} else{
							// do not update, if it's still a partial placeholder
					    	var pattern = /(^\[|\]$)/;
					    	if(pattern.test(text))
							    	return;
					    	// do not update, if the value is the same (over-sensitive dom event)
					    	if(#{prevValue} != text){
					    		#{prevValue} = text;
					    		#{attrUpdateMethod}(text);					    		
					    	}	
				    	}			        				        					    
					}
				})
				.on("focus",function(e){
					var text = CKEDITOR.instances.div#{attr}.getData().trim();
					var pattern = /(^\[|\]$)/;
			    	if(pattern.test(text)){
				    	// select the placeholder text
						var editor = CKEDITOR.instances.div#{attr};
					    var el = CKEDITOR.document.getById('div#{attr}');
					    var range = editor.createRange();
						editor.focus();
						range.selectNodeContents( el );
						range.select();
			    	}
				});
			})	
			*/
			
 			CKEDITOR.on('instanceReady', function(){ 
 				isReady = true;
 				var tmpDiv = CKEDITOR.instances.div#{attr}
 				tmpData = tmpDiv.getData();
 				#{prevValue} = tmpData.trim();
 			});		
	</script>

</composite:implementation>
</html>